برنامه نویسی - طراحی وب

مقالات مرتبط: قسمت اول دلیل محبوبیت React

Document.getElementById و Element.innerHTML بخش هایی از API های محلی هستند. در این جا با استفاده از APIهای پشتیبانی شده توسط بستر تحت وب با مرورگر ارتباط برقرار کرده‌ایم. وقتی که کدی در React می نویسیم، از API‌های React استفاده می شود و به آن اجازه می دهیم تا با استفاده از APIی DOM با مرورگر ارتباط برقرار کند.

React مثل یک مامور رابط بین ما و مرورگر عمل می کند و بیشتر کار ما با React است و نه خود مرورگر. باید گفته شود که مواردی هستند که ما باید با مرور گر ارتباط برقرار کنیم اما این موارد نادراند.

برای ایجاد همان رابط کاربری UI که تا الان با آن کار کردیم با کمک React باید یک Div دیگر ایجاد کرده و آن را “React” نام گذاری کنیم. در Inxex.html درست زیر div#js بخش زیر را اضافه کنید:

حالا در Script.js یک ثابت(Const) جدید برای Host یک Div جدید ایجاد کنید:

Const reactContainer = document.getElementById(“react”);

این هاست تنها بخشی است که از API های محلی استفاده می شود. ReactDom این هاست را برای قرار گرفتن برنامه نوشته شده در DOM  نیاز دارد.

بعد از تعریف این هاست، کتابخانه‌ی React را برای Render کردن نسخه ی React از HTML  به شکل زیر مورد استفاده قرار می دهیم:

کاری که بعد از این به سراغ آن خواهیم رفت، اولین پیشرفت بزرگ شما در شناخت کامل نسبت به کتابخانه ی React خواهد بود. یادتان هست گفتیم با استفاده از جاوا اسکریپت می توان HTMLنوشت؟ این دقیقا کاری است که در این جا در صدد انجام آن هستیم.

برای نوشتن یک رابط کاربری ساده ی HTML، باید از فرمان های جاوا اسکریپت استفاده کنیم که در انتهای مثال شما تصویر بهتری از دلیل این کار بدست خواهید آورد.

به جای این که با Stringها کار کنیم (شبیه به مثال بالا در نمونه جاوا اسکریپت)، در React از Object ها استفاده می شود. هر HTML به شکل یک Object با استفاده از فرمان React.createElement تعریف می شود (که کار اصلی React API می باشد).

معادل رابط کاربری HTML که قبلا با آن کار کردیم با کمک React به شکل زیر خواهد بود.

React.createElement دارای Argument های زیادی است:

• 1- اولین Argument آن برچسب HTML است که در مثال ما Div بود.
• 2- دومین آرگومنت، Object است که در خود، ویژگی های مورد نظر ما را برای این برچسب دارد. برای هماهنگی با نمونه محلی JS از همان نام گذاریClassName”: “demo } استفاده می کنیم که برابر است با “class=demo”. توجه داشته باشید که به جای Class از ClassName استفاده کردیم چون این جاوا اسکریپت است که با API های تحت وب هم خوانی دارد و نه HTML ها.
• 3- آرگومنت سومی محتوای Element است. ما در این مثال از “String hello React” استفاده کرده ایم.

خوب حالا می توانیم تست کنیم. مرور گر هم “Hello JS” و هم “Hello React” را رندر خواهد کرد. Div های نمایشی را با کمک CSS به شکل جعبه تعریف می کنیم تا بتوان براحتی تصویر نمایش داده شده را تقسیم بندی کرد. در index.html داریم:

حالا دو Node داریم، یکی توسط Dom به شکل مستقیم و دیگری با API React کنترل می شود. تنها اختلاف بین این دو روش روش ایجاد این node ها در مرور گر است؛ در نسخه JS از یک String برای این کار استفاده شد، در حالی که در نسخه ی React از فرمان های Javascript استفاده می شود و محتوا به شکل یک Object ارائه خواهد شد.

صرف نظر از میزان پیچیدگی یک رابطه کاربری HTML، هر المنت HTML با یک Object جاوااسکریپت و با استفاده از فرمان React.createElement ارائه خواهد شد.

حالا بیایید ویژگی های بیشتری به رابط کاربری‌مان اضافه کنیم. در این جا یک Textbox برای دریافت اطلاعات ورودی از کاربر به UI اضافه می کنیم.

برای قرار دادن المنت ها در تمپلیت HTML، باید از خود HTML استفاده کرد. برای مثال، اگر بخواهیم Div، یک المنت ورودی به شکل  را رندر کند، فقط آن را به محتوا اضافه خواهیم کرد:

همین کار را می توان براحتی با React انجام داد؛ به این شکل که آرگومنت های بیشتری را بعد از سومین آرگومنت برای React.createElement اضافه می کنیم. برای این که با نمونه محلی Js هم خوانی داشته باشد، یک آرگومنت چهارم اضافه می کنیم (که خود یک فرمان React.createElement دیگر است) که المنت ورودی ما را رندر کند. (به یاد داشته باشید که در React، هر HTML یک Object است.)

تا این جای کار ممکن است برای شما این سوال پیش آمده باشد که چرا کار به این سادگی را این قدر پیچیده می کنیم. حق با شماست ولی برای این کار دلیل بسیار خوبی داریم. به خواندن ادامه دهید!

بیاید حالا در هر دو نسخه یک Timestamp را رندر کنیم. در نسخه جاوااسکریپت، Timestamp را در یک المنت پاراگراف قرار می دهیم. از یک فرمان ()New Date برای نمایش Timestamp ساده بهره خواهیم برد:

برای انجام همین کار در React، آرگومنت پنجم را در المنت div اضافه می کنیم. این آرگومنت یک فرمان React.createElement دیگر است که این بار، با استفاده از یک برچسب p و بدون هیچ ویژگی از ()New Date به عنوان محتوای خود بهره می برد:

هر دو نسخه گفته شده در بالا، دقیقا HTML مشابه را در مرور گر رندر می کنند.

همان طور که می بینید تا به این جای کار، استفاده از React سخت تر از روش های معمولی است. ولی چیزی که React را نسبت به روش های معمولی با ارزش تر می کند، رندر کردن اولیه HTML نیست، بلکه آن چیزی است که برای بروز رسانی و تغییر نمای کنونی آن در DOM نیاز داریم.

پس در ادامه یک فرانید بروزرسانی DOM را انجام خواهیم داد. برای شروع بیاید کاری کنیم تا Timestap در هر ثانیه یک تیک بزند.

براحتی می توان با کمک فرمان SetInterval در مرورگر این کار را انجام داد. پس تمامی کد نویسی های بالا را در یک تابع قرار می دهیم و نامش را Render گذاشته و در فرمان setInterval از آن استفاده می کنیم تا به شکل ثانیه ای تکرار شود.

کد نویسی نهایی در Script.js به شکل زیر خواهد بود:

حالا وقتی که مرور گر رفرش شود، Timestamp در هر ثانیه در هر دو نسخه یک تیک خواهد زد. در این جا، بروز رسانی DOM رخ می دهد. این دقیقا لحظه ای است که Raect شما را متعجب خواهد کرد. اگر شما تلاش کنید تا چیزی در Textbox در نسخه ی جاوا اسکریپت بنویسید، موفق نخواهید شد. این بدان خاطر است که تمامی Node در هر ثانیه تیک خوردن Timestrap از DOM خارج می شود. ولی با React براحتی می توانید در Textbox چیزی بنویسید.

اگر چه تمامی کد نویسی React در تایمر در حال اجراست، React فقط پاراگراف مربوط به Timestamp را تغییر داده و تمامی Node را در DOM تغییر نخواهد داد. این دقیقا دلیل توانایی شما در نوشتن در Textbox بود، چون که کد های آن تغییر نمی کردند.

اگر در پنل ابزار های برنامه نویسی کروم این Node ها را اجرا کنید، می توانید به شکل نمایشی، دو روش مختلف بالا را مشاهده و بررسی کنید. ابزار های کروم، المنت های HTML که بروزرسانی می شوند را هایلاتیت می کند. شما می توانید در این بخش تمامی JS ها را در هر تیک ثانیه ببینید، در حالی که در React فقط بخش مربوط به تایمر را بروز رسانی می کند و تغییر می دهد.

React دارای الگوریتمی به نام Diffing است که کمک می کند در Node فقط آن چه باید و نیاز است بروز رسانی شود و تغییر کند و نه کل Node. این توانایی با کمک DOM مجازی در React امکان پذیر شده و این که تعریف های رابط کاربری در حافظه قرار می گیرند کمک بسیار زیادی می کند.

با استفاده از یک DOM مجازی، React آخرین نسخه DOM را در حافظه نگه می دارد و یک DOM جدید به مرورگر می دهد که آن نیز در حافظه قرار خواهد گرفت. با این روش، React می تواند اختلاف بین دو DOM را در نسخه جدید و قدیم مقایسه و محاسبه کند (در مثال ما، پاراگراف مربوط به timestamp).

React سپس به مرورگر فرمان خواهد داد diff محاسبه شده و نه همه DOM، بروز رسانی شود. مهم نیست تا چه تعداد رابط کاربری از نو ایجاد بشود، React به مرورگر کمک می کند فقط بخش های مربوطه بروز رسانی شده و تغییر کنند.

منبع: لرن فایلز